<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../util.js"></script>
    <style>
        * {margin:0; padding:0; list-style:none;}
        #div1 {position:absolute; bottom:10px; width:100%; text-align:center;}
        #div1 img {width: 64px;}
    </style>
</head>
<body>
    <div id="div1">
        <img src="img/01.png" />
        <img src="img/02.png" />
        <img src="img/03.png" />
        <img src="img/01.png" />
        <img src="img/02.png" />
    </div>
    <script>
        window.onload = function () {
            
            class Big {
                constructor (){
                    this.imgs = document.querySelectorAll('#div1 img')
                    this.width = this.imgs[0].offsetWidth
                    this.bindEvent()
                }
                bindEvent (){
                    document.onmousemove = (e) => {
                        this.x = e.clientX
                        this.y = e.clientY
                        this.imgs.forEach( img =>{
                            this.a = this.x - utils.getBodyPos(img).left - img.offsetWidth / 2
                            this.b = this.y - utils.getBodyPos(img).top - img.offsetHeight / 2
                            this.bigger(this.a,this.b,img)
                        })
                    }
                }
                bigger (a,b,img) {
                    var c = Math.sqrt(Math.pow(a,2) + b ** 2)
                    // console.log(this.width)
                    if(c <= 300){
                        img.style.width = (2-c/300) * this.width + 'px'
                        console.log(img.style.width)
                    }
                }
            }
            new Big()
        }
    </script>
</body>
</html>